import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import axios from 'axios'
import '../../../utils/Data'
import { ALLSTATE } from '../../../type/store.d'
import { Swiper, Image, Grid } from 'react-vant';
function Index() {
  const dispatch = useDispatch()
  useEffect(() => {
    axios.get('/api/swiper').then((res) => {
      dispatch({
        type: 'SETSWIPER',
        payload: res.data.swiperlist
      })
    })
    axios.get('/api/grid').then((res) => {
      dispatch({
        type: 'SETGRID',
        payload: res.data.gridlist
      })
    })
    axios.get('/api/list').then((res) => {
      dispatch({
        type: 'SETLIST',
        payload: res.data.list
      })
    })
  }, [])
  const data1 = useSelector((state: ALLSTATE) => {
    return state.swiperlist
  })
  const data2 = useSelector((state: ALLSTATE) => {
    return state.gridlist
  })
  const data3 = useSelector((state: ALLSTATE) => {
    return state.list
  })
  return (
    <div>
      <div className="demo-swiper">
        <Swiper autoplay={2000} loop={true}>
          {data1.map((item, index) => (
            <Swiper.Item key={index}>
              <Image lazyload src={item.img} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <Grid square>
        {data2.map((item, index) => (
          <Grid.Item key={index}>
            <p><img src={item.img} alt="" /></p>
            <p>{item.txt}</p>
          </Grid.Item>
        ))}
      </Grid>
      <Grid border={false} columnNum={2}>
        {data3.map((item, index) => (
          <Grid.Item key={index}>
            <p><img src={item.img} alt="" /></p>
            <p>{item.txt}</p>
            <p>￥：{item.price}</p>
          </Grid.Item>
        ))}
      </Grid>
    </div>
  )
}

export default Index